import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:testlzhu/view/click_view.dart';

class SearchAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String hintLabel;
  final double contentHeight; //从外部指定高度
  final ValueChanged<String>? onSubmitted;
  final VoidCallback canClick;

  const SearchAppBar({Key? key, this.hintLabel = '请输入内容', this.contentHeight = 56, this.onSubmitted, required this.canClick}) : super(key: key);

  @override
  _SearchAppBarState createState() => _SearchAppBarState();

  @override
  Size get preferredSize => Size.fromHeight(contentHeight); //这里设置控件（appBar）的高度
}

class _SearchAppBarState extends State<SearchAppBar> {
  late FocusNode _focusNode;

  ///默认不展示控件

  bool _offstage = false;

  ///监听TextField内容变化
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();

    _focusNode = FocusNode();
    _textEditingController.addListener(() {
      var isVisible = _textEditingController.text.isNotEmpty;
      _updateDelIconVisible(isVisible);
    });
  }

  _updateDelIconVisible(bool isVisible) {
    setState(() {
      _offstage = !isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      child: SizedBox(
        height: widget.contentHeight,
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                margin: const EdgeInsets.only(left: 14, top: 8, bottom: 8),
                height: double.infinity,
                decoration: BoxDecoration(color: const Color(0xffF5F6FA), borderRadius: BorderRadius.circular(4)),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const Padding(
                      padding: EdgeInsets.only(left: 8.0),
                      child: Icon(
                        Icons.search,
                        size: 16,
                        color: Color(0xff666666),
                      ),
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: TextField(
                          onSubmitted: widget.onSubmitted,
                          textInputAction: TextInputAction.search,
                          controller: _textEditingController,
                          autofocus: true,
                          focusNode: _focusNode,
                          style: const TextStyle(fontSize: 14, color: Colors.black),
                          decoration: InputDecoration(border: InputBorder.none, hintText: widget.hintLabel),
                          maxLines: 1,
                        ),
                      ),
                    ),
                    Offstage(
                      offstage: _offstage,
                      child: ClickView(
                        onPressed: () {
                          _textEditingController.clear();
                        },
                        child: const Icon(Icons.close),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            ClickView(
              onPressed: () {
                _focusNode.unfocus();
                widget.canClick();
              },
              child: Container(
                padding: const EdgeInsets.only(left: 16, right: 16),
                child: const Text("取消", style: TextStyle(fontSize: 16, color: Color(0xFF3D7DFF))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
